<template>
	<scroll-view scroll-y="true" class="container" :class="themeStyle">
		<view class="header-wrap ns-gradient-pages-lodin-login-login" :class="themeStyle">
			<image class="header-bg" :src="$util.img('/upload/uniapp/login.png')" mode="widthFix"></image>
			<view class="bottom-wrap"></view>
			<view class="face-wrap" v-if="userInfo.avatarUrl != ''">
				<image :src="$util.img(userInfo.avatarUrl)" @error="userInfo.avatarUrl = $util.getDefaultImage().default_headimg"></image>
			</view>
		</view>
		<view class="body-wrap">
			<view class="form-wrap">
				<view class="input-wrap" v-show="loginMode == 'mobile'">
					<text class="iconfont iconshouji"></text>
					<view class="content">
						<view class="area-code">+86</view>
						<input type="number" placeholder="请输入手机号码" placeholder-class="input-placeholder" class="input" maxlength="11"
						 v-model="formData.mobile" />
					</view>
				</view>
				<view class="input-wrap" v-show="loginMode == 'account'">
					<text class="iconfont iconyonghu"></text>
					<view class="content"><input type="text" placeholder="请输入手机号码" placeholder-class="input-placeholder" class="input"
						 v-model="formData.account" /></view>
				</view>
				<view class="input-wrap" v-show="loginMode == 'account'">
					<text class="iconfont iconmima"></text>
					<view class="content"><input type="password" placeholder="请输入密码" placeholder-class="input-placeholder" class="input"
						 v-model="formData.password" /></view>
				</view>
				<view class="input-wrap">
					<text class="iconfont iconLjianpanyanzhengma-"></text>
					<view class="content">
						<input type="text" placeholder="请输入验证码" placeholder-class="input-placeholder" class="input" v-model="formData.vercode" />
						<image :src="captcha.img" mode="" class="captcha" @click="getCaptcha"></image>
					</view>
				</view>
				<view class="input-wrap" v-show="loginMode == 'mobile'">
					<text class="iconfont iconyuechi"></text>
					<view class="content">
						<input type="text" placeholder="请输入动态码" placeholder-class="input-placeholder" class="input" v-model="formData.dynacode" />
						<view class="dynacode" :class="dynacodeData.seconds == 120 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode">
							{{ dynacodeData.codeText }}
						</view>
					</view>
				</view>
			</view>
			<view class="forget-section">
				<view>
					<text @click="switchLoginMode" v-show="loginMode == 'mobile'">账号登录</text>
					<text @click="switchLoginMode" v-show="loginMode == 'account' && registerConfig.dynamic_code_login == 1">短信快捷登录</text>
				</view>
				<view class="align-right" v-show="loginMode == 'account'"><text @click="forgetPassword">忘记密码</text></view>
			</view>
			<button type="primary" @click="login" class="login-btn ns-border-color ns-bg-color">登录</button>
			<button type="warn" @click="authLogin" v-if="isBind" class="auth-login ns-border-color ns-text-color">一键授权登录</button>
			<button type="warn" @click="wxLogin" v-if="vicky_bind == 1" class="auth-login ns-border-color ns-text-color">一键授权登录</button>
			
			<!-- <button type="warn" @click="dingyue" class="auth-login ns-border-color ns-text-color">订阅消息</button> -->
			
			<view class="regisiter-agreement" v-if="registerConfig.is_enable == 1">
				还没有账号
				<text class="ns-text-color ns-font-size-sm" @click="toRegister">立即去注册</text>
			</view>

			<!-- #ifdef APP-PLUS -->
			<view class="third-login" v-if="kaitong==1">
				<!-- 	<view @click="qqLogin">
					<image :src="$util.img('upload/uniapp/QQ.png')" mode=""></image>
					<view>QQ登录</view>
				</view> -->

				<view @click="wxLogin" v-if="vicky_bind==2">
					<image :src="$util.img('upload/uniapp/WX.png')" mode=""></image>
					<view>微信一键登录</view>
				</view>

			</view>
			<!-- #endif -->

		</view>
	</scroll-view>
</template>

<script>
	import validate from 'common/js/validate.js';
	import auth from 'common/js/auth.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		data() {
			return {
				loginMode: 'mobile',
				formData: {
					mobile: '',
					account: '',
					password: '',
					vercode: '',
					dynacode: '',
					key: ''
				},
				captcha: {
					id: '',
					img: ''
				},
				isSub: false, // 提交防重复
				back: '', // 返回页
				redirect: 'redirectTo', // 跳转方式
				openidIsExits: false,
				isBind: false,
				vicky_bind: 2,
				kaitong: 1,
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '获取动态码',
					isSend: false
				},
				registerConfig: {
					is_enable: 1
				}
			};
		},
		mixins: [auth, globalConfig],
		onLoad(option) {
			let url = '';
			var that = this
			console.log(uni.getSystemInfoSync().platform)
			if (uni.getSystemInfoSync().platform === 'android') {
				that.kaitong = 1;
			} else {
				that.$api.sendRequest({
					url: '/api/login/kaitong',
					success: res => {

						if (res.code >= 0) {
							that.kaitong = 1;
						} else {
							that.kaitong = 2;
						}
					}
				});
			}

			if (option) {
				url = option.back;
				Object.keys(option).forEach(function(key) {
					if (key != 'back') {
						if (url.indexOf('?') != -1) {
							url += '&' + key + '=' + option[key];
						} else {
							url += '?' + key + '=' + option[key];
						}
					}
				});
				this.back = url;
			}
			this.getCaptcha(); //获取验证码
			this.getRegisterConfig(); //获取注册配置

			if (uni.getStorageSync('authInfo')) {
				let data = uni.getStorageSync('authInfo');
				if (data.authInfo) this.authInfo = data.authInfo;
				if (data.userInfo) this.userInfo = data.userInfo;
				this.checkOpenidIsExits();
			}

			// #ifdef APP-PLUS
			var storage_key_vicky = uni.getStorageSync('storage_key_vicky');
			console.log(storage_key_vicky)
			if (storage_key_vicky) {
				that.userInfo.avatarUrl = storage_key_vicky.headimgurl;
			}

			var wx_unionid = uni.getStorageSync('wx_unionid');
			if (wx_unionid) {
				that.wx_unionid = wx_unionid;
			}

			var vicky_bind = uni.getStorageSync('vicky_bind');
			if (vicky_bind) {
				console.log('绑定参数为' + vicky_bind)
				that.vicky_bind = vicky_bind;
			}


			// #endif

		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();

			// #ifdef MP
			this.getCode(() => {
				if (Object.keys(this.authInfo).length) {
					this.$api.sendRequest({
						url: '/api/login/openidisexits',
						data: this.authInfo,
						success: res => {
							if (res.code >= 0 && res.data > 0) {
								this.isBind = true;
							}
						}
					});
				}
			});
			// #endif
			this.getUserInfo();
		},

		methods: {
			getPhoneNumber(e) {
				console.log(e)
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log('用户点击了接受');
					//e.detail这里会有三个属性
					//encryptedData
					//errMsg   
					//iv
				} else {
					console.log('用户点击了拒绝');
				}
			},

			/**
			 * 获取注册配置
			 */
			getRegisterConfig() {
				this.$api.sendRequest({
					url: '/api/register/config',
					success: res => {
						if (res.code >= 0) {
							this.registerConfig = res.data.value;
							if (this.registerConfig.dynamic_code_login == 1) this.loginMode = 'mobile';
							else this.loginMode = 'account';
						}
					}
				});
			},
			/**
			 * 切换登录方式
			 */
			switchLoginMode() {
				this.loginMode = this.loginMode == 'mobile' ? 'account' : 'mobile';
			},
			/**
			 * 获取验证码
			 */
			getCaptcha() {
				this.$api.sendRequest({
					url: '/api/captcha/captcha',
					data: {
						captcha_id: this.captcha.id
					},
					success: res => {
						if (res.code >= 0) {
							this.captcha = res.data;
							this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						}
					}
				});
			},
			/**
			 * 去注册
			 */
			toRegister() {
				if (this.back)
					this.$util.redirectTo('/pages/login/register/register', {
						back: this.back
					});
				else this.$util.redirectTo('/pages/login/register/register');
			},
			/**
			 * 忘记密码
			 */
			forgetPassword() {
				if (this.back)
					this.$util.redirectTo('/otherpages/login/find/find', {
						back: this.back
					});
				else this.$util.redirectTo('/otherpages/login/find/find');
			},
			/**
			 * 登录
			 */
			login() {
				if (this.loginMode == 'account') {
					var url = '/api/login/login';
					data = {
						username: this.formData.account,
						password: this.formData.password
					};
				} else {
					var url = '/api/login/mobile',
						data = {
							mobile: this.formData.mobile,
							key: this.formData.key,
							code: this.formData.dynacode
						};
				}
				if (this.captcha.id != '') {
					data.captcha_id = this.captcha.id;
					data.captcha_code = this.formData.vercode;
				}
				if (Object.keys(this.authInfo).length) {
					data[this.authInfo.auth_tag] = this.authInfo.auth_openid;
				}
				if (this.userInfo.avatarUrl != '') data.headimg = this.userInfo.avatarUrl;
				if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member'); //推荐人

				var wx_unionid = uni.getStorageSync('wx_unionid');
				if (wx_unionid) {
					data.wx_unionid = wx_unionid;
				}

				if (this.verify(data)) {
					console.log(this.isSub)
					if (this.isSub) return;

					console.log(data);
					this.isSub = true;
					this.$api.sendRequest({
						url,
						data,
						success: res => {
							console.log(res);
							console.log('来到了账号密码登录')
							if (res.code >= 0) {
								console.log('来到这里')
								console.log(this.back);
								uni.setStorage({
									key: 'token',
									data: res.data.token,
									success: () => {
										uni.removeStorageSync('loginLock');
										uni.removeStorageSync('unbound');
										if (this.back) {

											this.$util.redirectTo(this.back, {}, this.redirect);
										} else {

											this.$util.redirectTo('/pages/member/index/index', {}, this.redirect);
										}
									}
								});
							} else {
								this.isSub = false;
								this.getCaptcha();
								this.$util.showToast({
									title: res.message
								});
							}
						},
						fail: res => {
							this.isSub = false;
							this.getCaptcha();
						}
					});
				}
			},
			/**
			 * 登录验证
			 * @param {Object} data
			 */
			verify(data) {
				let rule = [];
				// 手机号验证
				if (this.loginMode == 'mobile') {
					rule = [{
							name: 'mobile',
							checkType: 'required',
							errorMsg: '请输入手机号'
						},
						{
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确的手机号'
						}
					];
					if (this.captcha.id != '')
						rule.push({
							name: 'captcha_code',
							checkType: 'required',
							errorMsg: this.$lang('captchaPlaceholder')
						});
					rule.push({
						name: 'code',
						checkType: 'required',
						errorMsg: this.$lang('dynacodePlaceholder')
					});
				}

				// 账号验证
				if (this.loginMode == 'account') {
					rule = [{
							name: 'username',
							checkType: 'required',
							errorMsg: this.$lang('accountPlaceholder')
						},
						{
							name: 'password',
							checkType: 'required',
							errorMsg: this.$lang('passwordPlaceholder')
						}
					];
					if (this.captcha.id != '')
						rule.push({
							name: 'captcha_code',
							checkType: 'required',
							errorMsg: this.$lang('captchaPlaceholder')
						});
				}

				var checkRes = validate.check(data, rule);
				if (checkRes) {
					return true;
				} else {
					this.$util.showToast({
						title: validate.error
					});
					return false;
				}
			},
			/**
			 * 授权登录
			 */
			authLogin() {
				if (this.isSub) return;
				this.isSub = true;
				this.$api.sendRequest({
					url: '/api/login/auth',
					data: this.authInfo,
					success: res => {
						if (res.code >= 0) {
							console.log(123123);
							console.log(this.back)
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: () => {
									uni.removeStorageSync('loginLock');
									uni.removeStorageSync('unbound');
									uni.removeStorageSync('authInfo');
									if (this.back != '') {
										this.$util.redirectTo(this.back, {}, this.redirect);
									} else {
										this.$util.redirectTo('/pages/member/index/index', {}, this.redirect);
									}
								}
							});
						} else {
							this.isSub = false;
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						this.$util.showToast({
							title: 'request:fail'
						});
					}
				});
			},
			/**
			 * 发送手机动态码
			 */
			sendMobileCode() {
				if (this.dynacodeData.seconds != 120) return;
				var data = {
					mobile: this.formData.mobile,
					captcha_id: this.captcha.id,
					captcha_code: this.formData.vercode
				};
				var rule = [{
						name: 'mobile',
						checkType: 'required',
						errorMsg: '请输入手机号'
					},
					{
						name: 'mobile',
						checkType: 'phoneno',
						errorMsg: '请输入正确的手机号'
					},
					{
						name: 'captcha_code',
						checkType: 'required',
						errorMsg: '请输入验证码'
					}
				];
				var checkRes = validate.check(data, rule);
				if (!checkRes) {
					this.$util.showToast({
						title: validate.error
					});
					return;
				}
				if (this.dynacodeData.isSend) return;
				this.dynacodeData.isSend = true;
				this.$api.sendRequest({
					url: '/api/login/mobileCode',
					data: data,
					success: res => {
						this.dynacodeData.isSend = false;
						if (res.code >= 0) {
							this.formData.key = res.data.key;

							if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
								this.dynacodeData.timer = setInterval(() => {
									this.dynacodeData.seconds--;
									this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
								}, 1000);
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: () => {
						this.$util.showToast({
							title: 'request:fail'
						});
						this.dynacodeData.isSend = false;
					}
				});
			},
			dingyue(){
				wx.requestSubscribeMessage({
					tmplIds: ['BjX0fIcEoAIn6LD_FvjmCXqCUCCra7V9oMeCh54iXYA'],
					success(res) {
						console.log('进来弹窗订阅模板')
						console.log(res)
					},error(res){
						console.log('失败咯')
						console.log(res);
					}
					
				})
			},
			checkOpenidIsExits() {
				if (Object.keys(this.authInfo).length) {
					uni.setStorage({
						key: 'authInfo',
						data: {
							authInfo: this.authInfo,
							userInfo: this.userInfo
						}
					});
					
					this.$api.sendRequest({
						url: '/api/login/openidisexits',
						data: this.authInfo,
						success: res => {
							if (res.code >= 0 && res.data > 0) {
								this.isBind = true;
							}
						}
					});
				}
			},
			// 获取运营商
			getProvider() {
				uni.getProvider({
					service: 'oauth',
					success: res => {
						this.loginProviderArr = res.provider;
					},
					error: res => {
						this.$util.showToast({
							title: '获取运营商失败'
						});
					}
				});
			},
			// qq登录
			qqLogin() {
				if (~this.loginProviderArr.indexOf('qq')) {
					uni.login({
						provider: 'qq',
						success: loginRes => {
							return;
							this.sendRequest({
								url: 'System.Login.qqOauthLogin',
								data: {
									token: JSON.stringify(loginRes.authResult)
								},
								success: res => {
									if (res.code >= 0) {
										uni.setStorage({
											key: 'token',
											data: res.data.token,
											success: () => {
												uni.removeStorageSync('loginLock');
												uni.removeStorageSync('unbound');
												uni.removeStorageSync('authInfo');
												if (this.back != '') {
													this.$util.redirectTo(this.back, {}, this.redirect);
												} else {
													this.$util.redirectTo('/pages/member/index/index', {}, this.redirect);
												}
											}
										});
									} else {
										this.$util.showToast({
											title: '登录失败'
										});
									}
								}
							});
							// 获取用户信息
							uni.getUserInfo({
								provider: 'qq',
								success: function(infoRes) {
									console.log(infoRes.userInfo);
									uni.setStorage({
										"self_info": infoRes.userInfo
									})
								},
								fail(error) {
									console.log(error);
								}
							});
						},
						fail: error => {
							this.$util.showToast({
								title: error.errMsg
							});
						}
					});
				} else {
					this.$util.showToast({
						title: '未配置qq登录'
					});
				}
			},
			//App端微信 通过openid来一键登录
			wxLogin() {
				var that = this;

				if (this.isSub) return;
				// this.isSub = true;

				var wx_unionid = uni.getStorageSync('wx_unionid');

				if (wx_unionid) { //获取过 openid的 自动登录

					this.$api.sendRequest({
						url: '/api/login/auth',
						data: {
							"auth_tag": "wx_unionid",
							"auth_openid": wx_unionid
						},
						success: res => {
							console.log(res)
							if (res.code >= 0) {
								console.log('一键登录成功')

								uni.setStorageSync('token', res.data.token);

								console.log(uni.getStorageSync('token'));

								// uni.setStorage({
								// 	key: 'token',
								// 	data: res.data.token,
								// 	success: () => {
								// 		uni.removeStorageSync('loginLock');
								// 		uni.removeStorageSync('unbound');
								// 		uni.removeStorageSync('authInfo');

								that.$util.redirectTo('/pages/member/index/index', {}, this.redirect);

								// 	}
								// });
							} else {

								this.$util.showToast({
									title: res.message
								});
							}
						},
						fail: res => {

							this.$util.showToast({
								title: 'request:fail'
							});
						}
					});

				} else {
					uni.login({
						provider: 'weixin',

						success: loginRes => {
							console.log(loginRes);
							
							uni.setStorageSync('wx_unionid', loginRes.authResult.openid); //先储存 openid

							//这边是前端自己去调微信用户信息的接口，根据接口需要请求，如果不需要前端去获取的话就交给后端，可省去次操作
							uni.request({ //获取微信用户信息

								url: "https://api.weixin.qq.com/sns/userinfo?access_token=" + loginRes.authResult.access_token +
									"&openid=" + loginRes.authResult.openid,

								method: 'GET',

								dataType: 'json',

								header: {

									'content-type': 'application/x-www-form-urlencoded' // 默认值

								},

								success(res) {

									console.log('【登录回调啾啾啾】', res.data);
									uni.setStorageSync('storage_key_vicky', res.data)
									that.userInfo.avatarUrl = res.data.headimgurl;


									//判断是否在app绑定过
									uni.request({
										url: 'https://bbyp.kangsitiankeji.cn/api/login/auth',
										data: {
											"auth_tag": "wx_unionid",
											"auth_openid": loginRes.authResult.openid
										},
										success: res => {
											console.log('检查是否有登录过app')
											console.log(res);
											console.log(res.data.code)

											if (res.data.code >= 0) { //如果app绑定过openid， 
												console.log('绑定过了');
												// uni.setStorageSync('vicky_bind',1);
												// that.vicky_bind = 1;

												uni.setStorageSync('token', res.data.data.token);

												console.log(uni.getStorageSync('token'));

												uni.removeStorageSync('loginLock');
												uni.removeStorageSync('unbound');
												uni.removeStorageSync('authInfo');

												that.$util.redirectTo('/pages/member/index/index', {}, this.redirect);

											} else {
												uni.setStorageSync('vicky_bind', 3);
												that.vicky_bind = 3;

												console.log('没绑定过');


											}


										}
									});

								}

							})

						}, //获取 openid和access_token
						fail: error => {
							console.log('用户拒绝了');
							that.$util.redirectTo('/pages/login/login/login', {}, that.redirect);
						}
					});

				}


				return false;


			}
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 120,
							timer: null,
							codeText: '获取动态码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		}
	};
</script>

<style lang="scss">
	@import '../public/css/common.scss';
</style>
